<template>
<div class="music-wrap" :class="{ hide: !isMusicShow }">
  <div id="music" @click="music" :style="pos">
    <div id="btn" :class="{ on: isMusicPlay }" :style="pos"></div>
    <audio id="media" loop="loop" autoplay :src="src"></audio>
  </div>
</div>

</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {once, browser} from '../assets/utils.js';
export default {
  name: 'music',
  props:['pos', 'src', 'isAuto'],
  data () {
    return {
      Media : null,
    }
  },
  computed:{
    ...mapGetters({                      
      isUserPause: 'userPause',          
      isMusicPlay: 'musicPlay',          
      isMusicShow: 'musicShow'          
    })
  },
  methods:{
    ...mapActions({
      userActionPause: 'userActionPause', 
      musicActionPlay: 'musicActionPlay'
    }),

    music:function(){                 
      if(this.Media.paused){         
        this.userActionPause(false);  
      }else{                          
        this.userActionPause(true); 
      }
      this.musicActionPlay(!this.isMusicPlay); 
    }
  },
  mounted:function(){
    var _self = this;
    _self.Media = document.getElementById('media');
    this.$nextTick(function(){  
      if(browser.versions.weixin){
        document.addEventListener("WeixinJSBridgeReady", function() {
          if(_self.isAuto){  //isAuto标识为true,则直接播放音乐
            _self.musicActionPlay(true);
            document.getElementById('media').play();   
          }else{  
            document.getElementById('media').load();
            document.getElementById('media').pause();
          }
        }, false);
      }else{
        if(this.isAuto){  
          _self.musicActionPlay(true);
          document.getElementById('media').play();
        }else{
          document.getElementById('media').load();
          document.getElementById('media').pause();
        }
      }

    })
    // ios上触摸一次，执行一次播放
    // once(document, 'touchstart', function(){  
    //   _self.Media.play();
    //   _self.musicActionPlay(true);
    // });

  },
  watch: {  // 监听 isMusicPlay的值，进行音乐播放 
    isMusicPlay: function() {
      this.isMusicPlay ? this.Media.play() : this.Media.pause()
    }
  },
  beforeDestroy:function(){
    
  }
}
</script>


<style scoped>

@-webkit-keyframes music-rotating {
   from{
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   to{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes music-rotating {
    from{
       -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    to{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}

#music{position: fixed;  width: 1.7rem; height: 1.7rem; z-index: 200;}
#music #btn{width: 1.7rem;height: 1.7rem; position:fixed;z-index:200; background: url('../assets/images/music_off1.png') no-repeat 0 0;background-size: 100% 100%;}
#music .on{
  -webkit-animation: music-rotating 1.2s linear infinite;
  animation: music-rotating 1.2s linear infinite;
}
.show{display: block;}
.hide{display: none;}
</style>
